<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

    <title>IT教育网2015课程学习情况</title>

    <!-- 载入所有的组件资源 -->
    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery.fullPage.js"></script>


    <!-- H5对象：进行内容管理 -->

    <script type="text/javascript" src="js/H5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/H5.css">

    <script type="text/javascript" src="js/H5_loading.js"></script>
    <link rel="stylesheet" type="text/css" href="css/H5_loading.css">

    <!-- 页面逻辑的样式 -->
    <style type="text/css">

        body {
            margin: 0;
            padding: 0;
        }

        .h5_page {
            background-image: url(imgs/page_bg.png);
        }

        .h5_page_face {
            background-image: url(imgs/face_bg.png);
        }

        .h5_component_name_slogan {
            -webkit-animation: rock 2s infinite 2s;
        }

        @-webkit-keyframes rock {
            0% {
                transform: rotate(0deg)
            }
            5% {
                transform: rotate(3deg)
            }
            10% {
                transform: rotate(-4deg)
            }
            15% {
                transform: rotate(3deg)
            }
            20% {
                transform: rotate(-2deg)
            }
            25% {
                transform: rotate(1deg)
            }
            30% {
                transform: rotate(-1deg)
            }
            70% {
                transform: rotate(0deg)
            }
            100% {
                transform: rotate(0deg)
            }
        }

        .h5_component_name_caption {
            background-image: url(imgs/page_caption_bg.png);
            width: 283px;
            height: 160px;
            text-align: center;
            line-height: 140px;
            font-size: 20px;
            color: #fff;
        }

        .h5_component_name_back {
            top: 30px;
            -webkit-animation: back 2s infinite 2s;
        }

        @-webkit-keyframes back {
            50% {
                top: 20px;
            }
        }
    </style>


<body>

<div class="loading">

    <div class="double-bounce1"></div>
    <div class="double-bounce2"></div>

    <div id="rate">0%</div>

</div>


<!-- 加载 H5组件 相关资源 -->
<script type="text/javascript">

    var res = [
        'Base', 'Bar', 'Bar_v', 'Point', 'Polyline',
        'Radar', 'Pie', 'Ring'
    ];
    var html = [];
    for (s in res) {
        html.push('<script type="text/javascript" src="js/H5Component' + res[s] + '.js"><\/script>');
        html.push('<link rel="stylesheet" type="text/css" href="css/H5Component' + res[s] + '.css">');

    }
    document.write(html.join(''));
</script>
<!-- 主要逻辑 -->
<script type="text/javascript">

    $(function () {

        var h5 = new H5();

        h5.whenAddPage = function () {
            this.addComponent('slide_up', {
                bg: 'imgs/footer.png',
                css: {
                    opacity: 0,
                    left: 0, bottom: -20,
                    width: '100%', height: '20px', zIndex: 999
                },
                animateIn: {
                    opacity: 1, bottom: '-1px'
                },
                animateOut: {
                    opacity: 0, bottom: '-20px'
                },
                delay: 500
            });
        }

        h5
            .addPage('face')
            .addComponent('logo', {
                center: true,
                width: 395,
                height: 130,
                bg: 'imgs/face_logo.png',
                css: {opacity: 0},
                animateIn: {top: 100, opacity: 1},
                animateOut: {top: 0, opacity: 0},
            })
            .addComponent('slogan', {
                center: true,
                width: 365,
                height: 99,
                bg: 'imgs/face_slogan.png',
                css: {opacity: 0, top: 180},
                animateIn: {left: '50%', opacity: 1},
                animateOut: {left: '0%', opacity: 0},
                delay: 500
            })
            .addComponent('face_img_left', {
                width: 370,
                height: 493,
                bg: 'imgs/face_img_left.png',
                css: {opacity: 0, left: -50, bottom: -50},
                animateIn: {opacity: 1, left: 0, bottom: 0},
                animateOut: {opacity: 0, left: -50, bottom: -50},
                delay: 1000
            })
            .addComponent('face_img_right', {
                width: 276,
                height: 449,
                bg: 'imgs/face_img_right.png',
                css: {opacity: 0, right: -50, bottom: -50},
                animateIn: {opacity: 1, right: 0, bottom: 0},
                animateOut: {opacity: 0, right: -50, bottom: -50},
                delay: 1000
            })
            .addPage()
            .addComponent('caption', {text: '核心理念'})
            .addComponent('text', {
                width: 500,
                height: 30,
                center: true,
                text: 'IT教育网=只学有用的',
                css: {
                    opacity: 0, textAlign: 'center', color: 'red', fontSize: '26px'
                },
                animateIn: {opacity: 1, top: 120},
                animateOut: {opacity: 0, top: 240},
            })
            .addComponent('description', {
                center: true,
                width: 481,
                height: 295,
                bg: 'imgs/description_bg.gif',
                css: {
                    opacity: 0,
                    padding: '15px 10px 10px 10px',
                    color: '#fff',
                    fontSize: '15px',
                    lineHeight: '18px',
                    textAlign: 'justify',
                    top: 240
                },
                text: '2013年，IT教育网的诞生引领中国IT职业从教育进入新时代；高质量实战课程、全新教学模式、实时互动学习，以领先优势打造行业品牌；迄今为止，IT教育网已成为中国规模最大、互动性最高的IT技能学习平台。',
                animateIn: {opacity: 1, top: 190},
                animateOut: {opacity: 0, top: 240},
                delay: 1000
            })
            .addComponent('people', {
                center: true,
                width: 515,
                height: 305,
                bg: 'imgs/p1_people.png',
                css: {
                    opacity: 0,
                    bottom: 0
                },
                animateIn: {opacity: 1, bottom: 40},
                animateOut: {opacity: 0, bottom: 0},
                delay: 500
            })

            .addPage()
            .addComponent('caption', {text: '课程分布方向'})//polyline
            .addComponent('polyline', {
                type: 'polyline',
                data: [['前端开发', .4, '#ff7676'], ['移动开发', .2], ['后端开发', .3, 'blue'], ['图像处理', .1]],
                width: 530,
                height: 300,
                center: true,
                css: {opacity: 0, top: 200},
                animateIn: {opacity: 1, top: 250},
                animateOut: {opacity: 0, top: 100},
            })
            .addComponent('msg', {
                text: '前端开发课程占到40%',
                css: {
                    opacity: 0, top: 160,
                    textAlign: 'center', width: '100%', color: '#ff7676'
                },
                animateIn: {opacity: 1},
                animateOut: {opacity: 0}
            })


            .addPage()
            .addComponent('caption', {text: '移动开发课程资源'})//pie
            .addComponent('pie', {
                type: 'pie',
                data: [
                    ['Android', .4, '#ff7676'],
                    ['IOS', .3],
                    ['Cocos2d-x', .2],
                    ['Unity-3D', .1],
                ],
                css: {top: 200},
                width: 300,
                height: 300,
                center: true
            })
            .addComponent('msg', {
                text: '移动课程 Android 占到40%',
                css: {
                    opacity: 0, bottom: 120,
                    textAlign: 'center', width: '100%', color: '#ff7676'
                },
                animateIn: {opacity: 1},
                animateOut: {opacity: 0}
            })
            .addPage() //bar（bar_v）
            .addComponent('caption', {text: '前端开发课程'})
            .addComponent('bar',
                {
                    type: 'bar',

                    width: 530,
                    height: 600,
                    data: [
                        ['Javascript', .4, '#ff7676'],
                        ['HTML/CSS', .2],
                        ['CSS3', .1],
                        ['HTML5', .2],
                        ['jQuery', .35],
                        ['Bootstrap', .05],
                        ['AngularJs', .09]
                    ],
                    css: {
                        top: 100,
                        opacity: 0
                    },
                    animateIn: {
                        opacity: 1,
                        top: 200,
                    },
                    animateOut: {
                        opacity: 0,
                        top: 100,
                    },
                    center: true,
                }
            )
            .addComponent('msg', {
                text: '前端课程 Javascript 占到40%',
                css: {
                    opacity: 0, bottom: 120,
                    textAlign: 'center', width: '100%', color: '#ff7676'
                },
                animateIn: {opacity: 1},
                animateOut: {opacity: 0}
            })

            .addPage() //（bar_v）
            .addComponent('caption', {text: '前端开发课程'})
            .addComponent('bar',
                {
                    type: 'bar_v',
                    width: 530,
                    height: 400,
                    data: [
                        ['Js', .4, '#ff7676'],
                        ['CSS3', .1],
                        ['HTML5', .2],
                        ['PHP', .05],
                        ['jQuery', .35]
                    ],
                    css: {
                        top: 220,
                        opacity: 0
                    },
                    animateIn: {
                        opacity: 1,
                        top: 200,
                    },
                    animateOut: {
                        opacity: 0,
                        top: 220,
                    },
                    center: true
                }
            )
            .addComponent('msg', {
                text: '前端课程 Javascript 占到40%',
                css: {
                    opacity: 0, top: 180,
                    textAlign: 'center', width: '100%', color: '#ff7676'
                },
                animateIn: {opacity: 1},
                animateOut: {opacity: 0}
            })

            .addPage()
            .addComponent('caption', {text: '后端开发课程'})//radar

            .addComponent('radar', {
                type: 'radar',
                width: 400,
                height: 400,
                data: [
                    ['Js', .9, '#ff7676'],
                    ['CSS3', .8],
                    ['HTML5', .7],
                    ['PHP', .6],
                    ['jQuery', .5]
                ],
                css: {
                    top: 100,
                    opacity: 0
                },
                animateIn: {
                    opacity: 1,
                    top: 200,
                },
                animateOut: {
                    opacity: 0,
                    top: 100,
                },
                center: true,
            })
            .addPage()
            .addComponent('caption', {text: '课程报名人数过万'})//ring
            .addComponent('ring-all', {
                type: 'ring', center: true,
                width: 300, height: 300,
                data: [['总课程', .7, '#ff7676']],
                css: {top: 120, opacity: 0, fontSize: '30px'},
                animateIn: {opacity: 1},
                animateOut: {opacity: 0},
            })
            .addComponent('msg', {
                text: '不同课程报名人数超过一万占比',
                css: {
                    opacity: 0, top: 300,
                    textAlign: 'center', width: '100%', color: '#ff7676'
                },
                animateIn: {opacity: 1},
                animateOut: {opacity: 0},
                delay: 1800,
            })
            .addComponent('ring-1', {
                type: 'ring', center: true,
                width: 140, height: 140,
                data: [['前端开发', .4, 'darkorange']],
                css: {left: 30, bottom: 110, opacity: 0, fontSize: '12px'},
                animateIn: {opacity: 1},
                animateOut: {opacity: 0},
            })
            .addComponent('ring-2', {
                type: 'ring',
                width: 140, height: 140,
                data: [['后端开发', .3, 'darkorange']],
                css: {left: 30, bottom: 110, opacity: 0, fontSize: '12px'},
                animateIn: {opacity: 1},
                animateOut: {opacity: 0},
            })
            .addComponent('ring-3', {
                type: 'ring',
                width: 140, height: 140,
                data: [['移动开发', .2, 'darkorange']],
                css: {right: 30, bottom: 110, opacity: 0, fontSize: '12px'},
                animateIn: {opacity: 1},
                animateOut: {opacity: 0},
            })
            .addComponent('ring-3', {
                type: 'ring',
                width: 140, height: 140,
                data: [['数据处理', .1, 'darkorange']],
                css: {left: 70, bottom: 40, opacity: 0, fontSize: '12px'},
                animateIn: {opacity: 1},
                animateOut: {opacity: 0},
            })
            .addComponent('ring-3', {
                type: 'ring',
                width: 140, height: 140,
                data: [['图像处理', .1, 'darkorange']],
                css: {right: 70, bottom: 40, opacity: 0, fontSize: '12px'},
                animateIn: {opacity: 1},
                animateOut: {opacity: 0},
            })

            .addPage()
            .addComponent('caption', {text: '课程难度分布'})//point
            .addComponent('point', {
                type: 'point',
                width: 300,
                height: 300,
                data: [
                    ['中级', .4, '#ff7676'],
                    ['初级', .2, '#ffa3a4', 0, '-60%'],
                    ['高级', .3, '#99c1ff', '50%', '-120%']
                ],
                css: {
                    bottom: 0,
                    opacity: 0
                },
                animateIn: {opacity: 1, bottom: '20%'},
                animateOut: {opacity: 0, bottom: 0},
                center: true,
            })

            .addPage('tail')
            .addComponent('logo', {
                center: true,
                width: 359,
                height: 129,
                bg: 'imgs/tail_logo.png',
                css: {top: 240, opacity: 0},
                animateIn: {opacity: 1, top: 210},
                animateOut: {opacity: 0, top: 240},
            })
            .addComponent('slogan', {
                center: true,
                width: 314,
                height: 46,
                bg: 'imgs/tail_slogan.png',
                css: {top: 280, opacity: 0},
                animateIn: {opacity: 1, left: '50%'},
                animateOut: {opacity: 0, left: '0%'},
                delay: 500
            })
            .addComponent('share', {
                width: 128,
                height: 120,
                bg: 'imgs/tail_share.png',
                css: {opacity: 0, top: 110, right: 110},
                animateIn: {opacity: 1, top: 10, right: 10},
                animateOut: {opacity: 0, top: 110, right: 110},
                delay: 1000
            })
            .addComponent('back', {
                width: 52,
                height: 50,
                bg: 'imgs/tail_back.png',
                center: true,
                onclick: function () {
                    $.fn.fullpage.moveTo(1)
                }
            })

            .loader(['imgs/tail_back.png', 'imgs/tail_share.png', 'imgs/tail_slogan.png']);

    });
</script>

</body>

</html>